<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
     <title>
          	未发货
	</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css"  />
</head>
<script src="${pageContext.request.contextPath}/js/jquery-1.6.3.js"></script>
 <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//获取员工列表
function getstaff(id){
		var url="${pageContext.request.contextPath}/StaffController/listStaff.action";
		var val={};
		$.post(url,val,function(data){
		$.each(data.staff,function(index,item){
			if(index==0){
			$("#staff"+id).prepend(
			"<option selected='selected' value='"+item.id+"'>"+item.name+"</option>"
			);
			}else{
			$("#staff"+id).prepend(
			"<option value='"+item.id+"'>"+item.name+"</option>"
			);
			}
		});
		});
}
$(".submitbtn").click(function(){

		var div=$(this).parent().addClass("submitbtn");
		 var input1=div.find('input').val();
		 var input2=div.find('#addressid').val();
		$("#adderss"+input1).css("display","block");
		var url="${pageContext.request.contextPath}/AddressController/getAddress.action";
		var val={"id":input2};
		$.post(url,val,function(data){
				var address=data.address;
				if(address==null){
			$("#adderss"+input1).html('<h4>获取地址信息失败<h4>');
				}else{
				var remarks=$("#remarks"+input2).html()
		getstaff(input1);
		$("#adderss"+input1).prepend(
		"<div id='spandiv"+input1+"'><span>联系人:"+address.name+"</span><br><span>电话:"+address.phonenum+"</span><br><span>地址:"
		+address.address+"</span><br><span>用户备注:"+remarks
		+"</span><br></div>"
	);
		}
		});
});	
$(".closebtn").toggle(function(){
	var id=$(this).find("input").val();
	$("#closediv"+id).css("display","block");
	/*
	$("#orderdiv"+id).css("display","none"); */
	
},function(){
var id=$(this).find("input").val();
	$("#closediv"+id).css("display","none");
});
$(".cancel").click(function(){
	var div=$(this).parent().addClass("closediv");
	div.css("display","none");
	
});
$(".confirm").click(function(){
	var div=$(this).parent().addClass("closediv");
	var id=div.find("input").val();
	var remarks=div.find("textarea").val();
	if(remarks==null||remarks==""){
	alert("取消原因不能为空");
	return false;
	}
	var url="${pageContext.request.contextPath}/OrderController/updateOrder.action";
	var val={"id":id,"state":4,"remarks":remarks};
	$.post(url,val,function(){
		
	});
	div.css("display","none");
	$("#orderdiv"+id).css("display","none");
	
});
$(".adderss").click(function(){
		
});
$(".confirmd").click(function(){
	var div=$(this).parent().addClass("address");
	var id=div.find("input").val();
	var url="${pageContext.request.contextPath}/OrderController/updateOrder.action";
	var staffid=$("#staff"+id).val();
	var val={"id":id,"state":2,"staffid":staffid};
	$.post(url,val,function(){
	
	});
	var div=$(this).parent().addClass("submitbtn");
	div.css("display","none");
	$("#orderdiv"+id).css("display","none");
});
$(".closed").click(function(){
	var div=$(this).parent().addClass("adderssclass");
	div.css("display","none");
	var id=div.find("input").val();
	$("#spandiv"+id).remove();
});

});
</script>
<body style="width: 100%;height: 100%">
    	<h3 style="margin-left:44%">未发货的订单</h3>
    	<c:if test="${orders!=null }">
    	<c:forEach items="${orders }" var="order" varStatus="list">
    	<div class="order" id="orderdiv${order.id}">
          <div style="width: 35%;float: left">
            <span>商品名称:</span>  
            <a href="">${order.commname}</a><br>
            <span>商品价格: ${order.price}元</span>
               <br> <span>购买用户:${order.username }</span>
          </div>
          <div style="width: 55%;float: left;">
            <span>数量:${order.num }</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <span>下单时间:<fmt:formatDate value="${order.cdate }" pattern="yyyy-MM-dd HH:mm:ss"/> </span>
           <br>备注:<span id="remarks${order.id }">${order.remarks}</span>
          </div>
          <div style="width: 10%;float: left;background:#FF7F00;height:100% ">
              <div  class="submitbtn">
                      	 <span>立即发货</span>
                <input type="hidden" value="${order.id}">
           		<div>
           		<input type="hidden" id="addressid" value="${order.addressid}">
           		</div>
                    
			</div>
              <div class="closebtn">
              			     <span> 取消订单</span>
             		<input type="hidden" value="${order.id}">
              </div>
          </div>
        </div>
        <!-- 地址弹窗 -->
        <div class="adderssclass" id="adderss${order.id }">
        	<input type='hidden' value='${order.id }'>
        	请选择送货员
        	<select id="staff${order.id}">
			</select><br>
        	<button class='confirmd'>确认发货</button>
        	<button class='closed'>取消</button>
        	
         </div>
         <!-- 取消订单弹窗 -->
    		<div class="closediv" id="closediv${order.id }">
    		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    				<span style="font-weight: 600">请填写您取消订单的原因</span><br>
    				<textarea rows="3" cols="60" style="margin-left: 7%"></textarea>
    				<br>
    				<button style="margin-left:75%;margin-top: 4.5%" class="confirm">确认
    				</button>
    				<button class="cancel">取消
    				</button>
    				<input type="hidden" value="${order.id}">
              </div>
        </c:forEach>
    	</c:if>
    	<c:if test="${orders==null }">
    		<h3 style="margin-left: 40%">暂时没有未发货订单</h3>
    	</c:if>
    		
    	   <!-- 翻页 -->
      <div style="margin-left: 72%;margin-top: 3%">
      		<a style="color:#FF7F00" href="${pageContext.request.contextPath}/OrderController/listOrder.action?page=${page-1}">上一页</a>
      		当前第<span style="color:#FF7F00">${page+1}</span>页
      		<a style="color:#FF7F00" href="${pageContext.request.contextPath}/OrderController/listOrder.action?page=${page+1}">下一页</a>
      </div>
 </body>
   <style>
   .closediv{
   border:1px solid #FF7F00;
   position: relative;
	z-index: 999;
	top: 5px;
	left: 30%;
	width:40%;
	height:17%;
	display:none;
   }
   .adderss{
   color:blue;
   }
    .adderss:hover{
   color:#0000CD;cursor: pointer;
   }
.submitbtn{
    height: 50%;text-align: center;color: #fff;width: 100%;float: none;line-height:25px;
   }
.submitbtn:hover{
  background: #FFA500;cursor: pointer;
}
.closebtn{
    height: 50%;text-align: center;color: #fff;padding-top:5%;width: 100%
   }
.closebtn:hover{
  background: #FFA500;cursor: pointer;
}
.order{
  width: 70%;height: 10%;margin: auto;border:1px solid #FF7F00;margin-top:1%;
}	  
.order a{
  font-size: 15px;
}
.adderssclass{
width: 50%;
        height: 20%;
        z-index: 99;background:#fff;
        border:1px solid #FF7F00;
        display:none;position: relative;
        top:-70px;left:23%;text-align: center;
}
.adderssclass span{
font-size: 16px;
font-weight: 600;
}
.adderssclass button{
font-size: 16px;color:#fff;background: #FF7F00;margin-top: 20px
}
.adderssclass button:HOVER {
	background: #FFA500;
}

   </style>
</html>